<template>
<div class="work_list_box">
    <div class="work_list_item_01">
        <div :class="{'box-card':selFlag}">
            <el-row class="box-card-row"
            style="padding-left: 5px;">
                <el-col :span="21" style="margin-top: 7px;">
                    <el-image 
                        style="width: 18px; height: 18px; margin-left: 3px;" 
                        :src="dataObj.icon" 
                        fit="fill" />   
                        <div style="display: inline-block; line-height: 100%; height: 100%;  margin-left: 5px;vertical-align: middle;">
                            {{ dataObj.name}}
                        </div>
                </el-col>
                <el-col :span="3" style="padding-right: 10px;">
                    <el-popover
                        placement="top-start"
                        :popper-style="{width:50}"
                        trigger="hover"
                        content="删除"
                    > 
                    <!-- @click="removeworkItem(dataObj.pos)" -->
                        <template #reference>
                            <!-- v-if="dataObj.id == workList[curSelPos]"  -->
                            <svg-icon 
                            name="points" 
                            style="margin-top: 3px;"
                                :size="20"
                                :margin="5"
                                color="blue"/>
                        </template>
                    </el-popover>
                </el-col>
            </el-row>
        </div>
    </div>
</div>

</template>

<script setup>
import {defineProps, computed} from 'vue'
import {useStore} from 'vuex'
const {dataObj, selFlag} = defineProps([
    'dataObj', 'selFlag'
])
const store = useStore();
const removeworkItem = (id) =>{
    store.dispatch('removeworkItem', id) 
}
const curSelPos = computed(() => store.state.curSelPos);
const workList = computed(() => store.state.workList);

</script>

<style scoped>
.work_list_box{
    height: 35px;
    /* line-height: 35px; */
    margin: 10px;
}
.work_list_item_01 {
    height: 100%;
}
.work_list_item_01 .box-card {
    height: 100%;
    line-height: 100%;
}
.work_list_item_01 .el-card__body {
    padding: 10px;
    line-height: 100%;
}
.work_list_item_02{
    padding-left: 20px;
}
.box-card{
    box-shadow: 1px 1px 2px 2px rgb(233, 227, 227);
    border-radius: 5px;
    font-weight: bold;
}
.box-card-row {
    /* padding-top: 10px;
    padding-bottom: 10px; */
}
</style>

<!-- 2，我登陆过，本地需要缓存token信息，下次来的时候，直接进入主页
这边的积分多的话，显示有问题
5，角色设定这边应该是一个列表，可以选择，目前你只放了一个，不能选
6，同理，number的那个数字，number有内容，需要填进去，作为默认的值，而不是默认为0
7，这里的收费标准，是根据详情里面的score来设置的，不是默认都是50
7，这两个地方的现实，貌似对不齐，可以看下
8，这个字数，没有办法输入，鼠标只要一离开，数字就清空了
9，这里的现实样式，还有字数超过了限制的处理，都需要做一下
10.这个详情页面，进去之后，你给 名字和分数设置在这里了，
是不对的，这里现实的应该是用户的姓名和分数
11，这个流式返回的内容，如果有 \n 的话，就是回撤，需要转化为 </br> 来拼接
12.看下是否可以做到他这种样式，看起来舒服一点 -->